<!DOCTYPE html>
<html>
<head>
    <base href="${springMacroRequestContext.contextPath}/"/>
    <meta charset="utf-8">
    <title>管理其它工具</title>
    <script src="static/js/vue.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
    <script src="static/js/elementui-index.js"></script>
    <script src="static/js/axios.js"></script>
    <script src="static/layui/layui.js"></script>
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <!-- 引入 css -->
    <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
    <!-- 引入 js -->
    <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
    <style>
        header {
            /* background-color: #333; */
            background: #1d213d;
            color: #fff;
            padding: 10px;
            text-align: center;
            display: flex; /* 使用flex布局 */
            align-items: center; /* 垂直居中 */
        }

        header img{
            height: 100%; /* 图片高度与header高度相同 */
            width: 400px;
            padding: 0 10px; /* 可以根据需要调整图片与标题之间的间距 */
        }
        header h1 {
            flex: 0.63; /* 让标题占据剩余的空间，实现标题居中 */
            text-align: center; /* 水平居中 */
            color: #fff; /* 设置标题颜色为白色 */
            margin: 0; /* 去掉默认的margin */
        }

        #title{
            display: block;
            font-size: 2.1em;
            margin-block-start: 0.67em;
            margin-block-end: 0.67em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
        }


        .bodydiv{
            padding-top: 130px;
            height: 100%;
            max-height: 1200px;
        }




        table {
            width: 100%;
            border-collapse: collapse;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 10px;
            text-align: center;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        tr:hover {
            background-color: #e6e6e6;
        }

        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        #seachbtn{
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 8px 15px;
            cursor: pointer;
            margin-left:10px;
            width: 5%;
        }
    </style>
</head>
<body style="width: 100%;height: 100%;margin: 0px;overflow: hidden">
<div style="width: 100%;">
    <div style="position: fixed;width: 100%;">
        <header>
            <img src="static/images/logo.png" id="logo" style="float: left;" alt="梦寒君资源">
            <h1 id="title">管理其它工具</h1>
        </header>
    </div>
</div>
<div class="bodydiv">
    <div id="app" >
        <div class="pagination">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="资源ID">
                    <el-input v-model="formInline.resourceId" placeholder="ID精确查询查询"></el-input>
                </el-form-item>
                <el-form-item label="标题">
                    <el-input v-model="formInline.title" placeholder="标题模糊查询"></el-input>
                </el-form-item>
                <el-form-item label="等级">
                    <el-select v-model="formInline.level" placeholder="等级">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="免费" value="0"></el-option>
                        <el-option label="会员" value="1"></el-option>
                        <el-option label="付费" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchResource">查询</el-button>
                    <el-button type="info" @click="goto">增加工具</el-button>
                </el-form-item>
            </el-form>

        </div>

        <div style="width: 95%;height: 500px;overflow: auto; margin: 0 auto;">
            <el-collapse>
                <el-collapse-item v-for="(item,index) in toolData" :title="item.title" :name="index+''">
                    <div v-html="item.description"></div>
                    <div><span style="float: right"><el-button type="text" @click="edit(item.resourceId)" style="color: #1E9FFF;margin-right: 10px">编辑</el-button><el-button type="text" style="color:red;" @click="deleteResource(item.resourceId)">删除</el-button></span></div>
                </el-collapse-item>
            </el-collapse>
        </div>

        <div class="pagination">
            <el-pagination
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :page-sizes="[10, 30, 50,100,200]"
                    :current-page="pageNo"
                    :page-size="pageSize"
                    layout="total, sizes,prev, pager, next, jumper"
                    :total="totalSize">
            </el-pagination>
        </div>
    </div>




</div>
</body>
<script>
    var token = localStorage.getItem("token");


    new Vue({
        el:'#app',
        data:{
            toolData:[],
            pageSize:10,
            pageNo:1,
            totalSize:0,
            formInline: {
                title: '',
                type: '其它工具',
                level:'',
                resourceId:''
            },
            typeList:[]
        },
        methods:{
            /**
             * 跳转新增资源
             */
            goto(){
                window.open('/resourcesharing/goto/admin/addTool');
            },
            handleCurrentChange(val) {
                this.pageNo = val;
                this.searchResource();
            },
            handleSizeChange(val){
                this.pageSize = val;
            },
            searchResource(){
                axios.get('resources/getResourcesList?title='+this.formInline.title+'&resourceId='+this.formInline.resourceId+'&level='+this.formInline.level+'&type='+this.formInline.type+'&pageNo='+this.pageNo+'&pageSize='+this.pageSize,{headers: {"Content-Type": "application/json","Authorization": token}}).then(resp=>{
                    if(resp.data.code!=200){
                        this.$message({
                            showClose: true,
                            message: resp.data.msg,
                            type: 'error'
                        });
                    }else{
                        this.totalSize = resp.data.total;
                        this.toolData = resp.data.data;
                    }
                }).catch(err=>{
                    console.log(err);
                })
            },
            /**
             * 删除资源
             * @param value
             */
            deleteResource(value){
                this.$confirm('确定要删除这个资源吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get('resources/admin/deleteResourceById?resourceId='+value,{headers: {"Content-Type": "application/json","Authorization": token}}).then(resp=>{
                        if(resp.data.code!=200){
                            this.$message({
                                showClose: true,
                                message: resp.data.msg,
                                type: 'error'
                            });
                        }else{
                            this.$message({
                                showClose: true,
                                message: '操作成功！',
                                type: 'success'
                            });
                            this.searchResource();
                        }
                    }).catch(err=>{
                        console.log(err);
                    })
                })

            },
            edit(resid){
                window.open("/resourcesharing/goto/admin/addTool?resid="+resid)
            }
        },
        created() {
            this.searchResource();
        }
    })
</script>

</html>